<script setup>
import { ref } from 'vue';

// 状态变量控制显示哪个列表
const activeTab = ref('confirmed');
const arr = [
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月12日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月11日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月10日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月9日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月8日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月7日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月6日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date:'2025年9月5日',
    text1:'异常人数：1',
    text2:'异常说明关键词：#着急出校#',
  },
]
const arr1 = [
  {
    icon:'../../static/image/f1-1-date.png',
    date: '2025年9月12日',
    keywords: '未确认',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date: '2025年9月12日',
    keywords: '未确认',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date: '2025年9月12日',
    keywords: '未确认',
  },
  {
    icon:'../../static/image/f1-1-date.png',
    date: '2025年9月12日',
    keywords: '未确认',
  }
];
const toNext = (to) => {
  uni.navigateTo({
    url:to
  })
}

</script>

<template>
<view class="main">
  <view class="top">
    <view class="cd1" @click="toNext('/pages/user/faction1-3')">
      <view class="text-container1">
        <text class="text1">本学期已上报</text>
        <text class="text2">127/128 次</text>
      </view>
    </view>
    <view class="cd2" @click="toNext('/pages/user/faction1-2')">
      <view class="text-container2">
        <text class="text3">本学期异常名单</text>
        <text class="text4">100 人</text>
      </view>
    </view>
  </view>
  <view class="button">
    <button
        class="tab-btn"
        :class="{ active: activeTab == 'confirmed' }"
        @click="activeTab = 'confirmed'"
    >
      已确认
    </button>
    <button
        class="tab-btn"
        :class="{ active: activeTab == 'unconfirmed' }"
        @click="activeTab = 'unconfirmed'"
    >
      未确认
    </button>
  </view>
  <view class="list" >
    <view v-if="activeTab == 'confirmed'">
      <view v-for="(item,user) in arr" :key="user">
        <view class="cd" >
          <view class="icon-container">
            <image class="icon" :src ='item.icon'></image>
          </view>
          <view class="text-container">
            <text class="date">{{item.date}}</text>
            <text class="number">{{item.text1}}</text>
            <br>
            <text class="problem">{{item.text2}}</text>
          </view>
        </view>
        <view class="divider"></view>
      </view>
    </view>
    <view v-if="activeTab == 'unconfirmed'">
      <view v-for="(item, user) in arr1" :key="user">
        <view class="cd" >
          <view class="icon-container">
            <image class="icon" :src ='item.icon'></image>
          </view>
          <view class="text-container">
            <text class="date">{{item.date}}</text>
            <text class="number">{{item.keywords}}</text>
          </view>
        </view>
        <view class="divider"></view>
      </view>
    </view>
  </view>
</view>
</template>

<style scoped>
.tab-btn.active {
  background-color: #B41F2F;
  color: white;
  border-color: #B41F2F;
}
.tab-btn {
  flex: 1;
  height: 36px;
  background-color: white;
  border: 1px solid #E2E4E9;
  border-radius: 18px;
  font-size: 14px;
  color: #666;
}
.divider{
  height: 1px;
  background-color: #e5e5e5;
  margin: 5px 5px;
  width: 100%;
}
.date{
  width: 159px;
  height: 21px;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.number{
  margin-left: 150px;
  width: 82px;
  height: 21px;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.problem{
  width: 82px;
  height: 21px;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.cd{
  width: 400px;
  height: 70px;
  display: flex;
  flex-direction: row;
}
.icon{
  width: 14px;
  height: 14px;
}
.icon-container{
  margin-left: 12px;
}
.list{
  width: 100%;
  height: 90%;
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.button{
  width: 180px;
  height: 30px;
  background: #E2E4E9;
  border-radius: 15px;
  margin: 15px;
  display: flex;
}
.text-container1{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.text-container2{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.text3{
  width: 89px;
  height: 15px;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 10px;
  margin-top: 30px;
}
.text4{
  width: 89px;
  height: 15px;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 10px;
  margin-top: 12px;
}
.text1{
  width: 73px;
  height: 15px;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 10px;
  margin-top: 30px;
}
.text2{
  width: 73px;
  height: 15px;
  font-weight: 400;
  font-size: 12px;
  color: #FFFFFF;
  letter-spacing: 0;
  line-height: 10px;
  margin-top: 12px;
}
.top{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.cd1{
  width: 170px;
  height: 100px;
  background: url("../../static/image/f1-1.png");
  background-image: linear-gradient(91deg, #B41F2F 0%, #9e141f4d 86%);
  border-radius: 15px;
  margin: 20px;
}
.cd2{
  width: 170px;
  height: 100px;
  background-image: linear-gradient(91deg, #B41F2F 0%, #9e141f4d 86%);
  background: url("../../static/image/f1-1.png");
  border-radius: 15px;
}
.main {
  width: 100%;
  height: 100%;
  background: #F3F5F9;
}
</style>